<template>
    <div>
        <div class="main_operation">
            <!-- <div class="operation_left">
                <h3 class="title" style="min-width: 100px">历史曲线</h3>
            </div> -->
            <div class="operation_right">
                <a-select v-model="formList.user_id" allowClear class="mr10" style="width: 150px" placeholder="请选择用户">
                    <a-select-option v-for="item in passportAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
                <a-input placeholder="请输入公司名称" style="width: 200px;margin-right:5px" v-model="formList.company_name" />
                <a-select allowClear class="mr10" style="width: 200px" v-model="formList.login_status" placeholder="登录方式">
                    <a-select-option value="登录">登录</a-select-option>
                    <a-select-option value="退出登录">退出登录</a-select-option>
                    <a-select-option value="小程序登录">小程序登录</a-select-option>
                </a-select>
                <a-range-picker v-model="rangePickerVal" :placeholder="['登录开始时间', '登录结束时间']" class="mr5" @change="onDateChange" />
                <!-- <a-range-picker class="mr10" :placeholder="['登录开始时间', '登录结束时间']" /> -->
                <a-button class="mr10" type="primary" @click="onSearch">搜索</a-button>
                <a-button type="danger" @click="onSearch('reset')">重置</a-button>
                <!-- <a-button type="primary" @click="downloadBtn" style="margin-left:10px">下载数据</a-button> -->
                <!-- <a-button type="primary">下载数据</a-button> -->
            </div>
        </div>
        <div class="main">
            <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id">
                <!-- :scroll="{x: 890, y: 500 }" -->
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>

    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';

export default {
  name: 'LogonRecord',
  data() {
    return {
      // 列表
      rangePickerVal: undefined,
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
        login_status: undefined,
        user_id: undefined,
        page: 1,
        created_at_start: '',
        created_at_end: '',
      },
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.LoginRecord.Fields,
      dataLists: state => state.LoginRecord.dataLists,
      passportAllData: state => state.Passport.passportAllData, // 所有用户信息
    }),
  },
  mounted() {
    this.changeData();
    this.passportAll();
  },
  methods: {
    downloadBtn() {
      const that = this;
      if (this.formList.equipment_id == undefined) {
        this.$error({
          title: '没写下载逻辑',
        });
        return false;
      }
      this.$confirm({
        title: '确定下载当前所有数据嘛?',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          console.log('下载');
        },
      });
    },

    onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.created_at_start = dateStrings[0];
      this.formList.created_at_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.created_at_start;
        delete this.formList.created_at_end;
      }
    },
    ...mapActions({
      getLists: 'LoginRecord/getLists', // 列表
      passportAll: 'Passport/passportAll', // 所有用户信息
    }),
    /* 通用模块 */
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSearch(type) {
      if (type == 'reset') {
        this.formList = {
          login_status: undefined,
          user_id: undefined,
          page: 1,
        };
        this.rangePickerVal = undefined;
      } else {
        this.formList.page = 1;
      }
      this.changeData();
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */
  },
};
</script>

<style scoped>

</style>
